<template>
  <div class="details_container">
    <div class="details_swiper">
      <span @click="back" class="iconfont icon-fanhui"></span>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(img,index) in imgs" :key="index">
          <img width="100%" :src="img" alt />
        </van-swipe-item>
      </van-swipe>

      <div class="details_cons">
        <p style="font-size:.25rem;">{{details.dtitle}}</p>
        <p style="font-size:.2rem;color:grey;">{{details.title}}</p>
        <p style="margin-top:.1rem;">
          <span style="color:red;">￥{{details.actualPrice}}</span>&nbsp;&nbsp;
          <s style="color:grey;font-size:.18rem;">￥{{details.originalPrice}}</s>
        </p>
      </div>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" :badge="this.$store.state.homeModule.cart.length" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import REM from "../utills/rem";
export default {
  data() {
    return {
      details: {},
      imgs: [],
      // cart:[]
    };
  },
  created() {

    // let carts = localStorage.carts;
    // if(carts) {
    //   this.cart = JSON.parse(carts);
    // } 

    let id = this.$route.query.id;
    this.$axios.get("http://api.kudesoft.cn/tdk/details?id=" + id).then(res => {
      // console.log(res.data.data.data);
      this.details = res.data.data.data;
      this.imgs = this.details.imgs.split(",");
    });
  },
  mounted() {
    REM.Rem();
  },
  methods: {
    back() {
      window.history.back();
    },
    addCart() {
      this.$store.dispatch("addcarts",this.details);
      this.$toast.success('添加成功');

    //   let isempty = true;

    //   this.cart.map((item) => {
    //     if (item.obj.id == this.details.id) {
    //       item.num ++;
    //       isempty = false;
    //       return;
    //     }
    //   })

    //   if (isempty) {
    //     this.cart.push({
    //       obj:this.details,
    //       num:1
    //     })
    //   }

    //   localStorage.carts = JSON.stringify(this.cart);
    },
    goCart() {
      this.$router.push({
        path:'/cart'
      })
    }
  }
};
</script>

<style scoped>
.details_container {
  width: 100%;
  font-size: 0.3rem;
}
.icon-fanhui {
  background-color: rgba(255, 255, 255, 0.692);
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  z-index: 1;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  text-align: center;
  line-height: 0.4rem;
}
.details_swiper {
  width: 100%;
}
.details_cons {
  width: 100%;
  height: 2rem;
  box-sizing: border-box;
  padding: 0.1rem;
}
</style>